<template>
  <div id="spring-container">
    <div id="spring-param">
      <el-form :model="form" :inline="true">
        <el-form-item label="SIZE">
          <el-input v-model="form.size.x" @click.native.stop></el-input>
          <el-input v-model="form.size.y" @click.native.stop></el-input>
          <el-input v-model="form.size.z" @click.native.stop></el-input>
        </el-form-item>
        <el-form-item label="Extra">
          <el-select v-model="form.extra" placeholder="请选择" @click.native.stop @change="extraChange">
            <el-option
              v-for="item in extraOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">生效</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="spring-canvas"></div>
  </div>
</template>

<script>
  import * as THREE from 'three'
  import OrbitControls from 'threejs-orbit-controls'

  export default {
    name: "Spring3D",
    data() {
      return {
        form: {
          size: {
            x: 2,
            y: 1,
            z: 0.5
          },
          borderChecked: false
        },
        spring3D: null,
        lineSegments: null,
        extraOptions: [],
        scene: null

      }
    },
    methods: {
      extraChange(extra) {
        this.scene.remove(this.spring3D)
        this.spring3D = null
        this.createSpring(extra)
      },
      onSubmit() {
        this.spring3D.scale.x = this.form.size.x
        this.spring3D.scale.y = this.form.size.y
        this.spring3D.scale.z = this.form.size.z
      },
      createSpring(extra) {
        const R = 16;

        const length = 50;
        const pitch = length / Math.abs(extra)
        const points3D = []
        //绘制拉伸的线条
        for (let x = 0; x < length; x += length / 100) {
          let theta = 2 * Math.PI * x / pitch
          let y = R * Math.cos(theta)
          let z = R * Math.sin(theta)
          points3D.push(new THREE.Vector3(extra > 0 ? x : -x, y, z))
        }

        var curve = new THREE.CatmullRomCurve3(points3D);
        //绘制被拉伸的二维图
        let cirShape = new THREE.Shape()
        cirShape.moveTo(0, 0)
        cirShape.absarc(0, 0, R / 8, 0, 2 * Math.PI, false)

        var cirextrudeSettings = {
          amount: 10,
          bevelEnabled: false,
          bevelSegments: 8,
          steps: 200,
          bevelSize: 1,
          bevelThickness: 1,
          depth: 40,
          extrudePath: curve
        };
        var springgeometry = new THREE.ExtrudeGeometry(cirShape, cirextrudeSettings);


        var tmaterial = new THREE.MeshNormalMaterial({
          vertexColors: THREE.VertexColors,
          flatShading: true
        });
        this.spring3D = new THREE.Mesh(springgeometry, tmaterial)
        this.scene.add(this.spring3D)

      }
    },
    mounted() {
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xf0f0f0)
      var axes = new THREE.AxesHelper(100)
      this.scene.add(axes)
      var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
      var controls = new OrbitControls(camera, document.getElementById('spring-canvas'));

      var raycaster = new THREE.Raycaster();
      var mouse = new THREE.Vector2();

      var renderer = new THREE.WebGLRenderer();


      renderer.setSize(4 * window.innerWidth / 5, window.innerHeight);
      document.getElementById('spring-canvas').appendChild(renderer.domElement)


      this.createSpring(8)


      camera.position.set(20, 10, 150);
      controls.update();

      const _this = this
      var animate = function () {
        requestAnimationFrame(animate);
        // 通过摄像机和鼠标位置更新射线
        //   spring.rotation.x += 0.01;
        //  spring.rotation.y += 0.01;
        controls.update();
        renderer.render(_this.scene, camera);
      };

      function onMouseMove(event) {
        event.preventDefault();
        mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.offsetWidth) * 2 - 1;
        mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.offsetHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);

        // 计算物体和射线的焦点
        let intersects = raycaster.intersectObjects(this.scene.children);
        for (var i = 0; i < intersects.length; i++) {
          intersects[i].object.material.color.set(0x6699ff);
        }
      }

      //     window.addEventListener('click', onMouseMove, false);
      requestAnimationFrame(animate)
    },
    created() {
      for (let i = 4; i <= 13; i++) {
        this.extraOptions.push({
          "label": i, "value": i
        })
        this.extraOptions.push({
          "label": -i, "value": -i
        })
      }
    }
  }
</script>

<style scoped>

</style>
